<template>
  <div class="coupon">
    <el-form :inline="true"
      class="demo-form-inline">
      <el-form-item>
        <el-dropdown @command="setType">
          <span class="el-dropdown-link">
            {{typeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部类型',id:''}">全部类型</el-dropdown-item>
            <el-dropdown-item :command="{title:'代金券',id:'1'}">代金券</el-dropdown-item>
            <el-dropdown-item :command="{title:'折扣券',id:'2'}">折扣券</el-dropdown-item>
            <el-dropdown-item :command="{title:'礼品券',id:'3'}">礼品券</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-dropdown @command="setType_state">
          <span class="el-dropdown-link">
            {{typeStr_state}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部类型',id:''}">全部类型</el-dropdown-item>
            <el-dropdown-item :command="{title:'启用',id:'1'}">启用</el-dropdown-item>
            <el-dropdown-item :command="{title:'禁用',id:'2'}">禁用</el-dropdown-item>
            <el-dropdown-item :command="{title:'已失效',id:'4'}">已失效</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入券名称"
          v-model="search"
          clearable></el-input>
      </el-form-item>
      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary"
          @click.native="_reset"
          size="small"
          style="width:60px">
          <i class="el-icon-search"></i>
        </el-button>
      </el-form-item>
      <el-form-item class="fr"
        v-has="'marketingcouponredact'">
        <el-button type="primary"
          size="small"
          style="width:60px"
          @click="add">
          新增
        </el-button>
      </el-form-item>
      <el-table :data="tableData"
        max-height="550">
        <el-table-column fixed
          prop="id"
          label="ID"
          width='50'>
        </el-table-column>
        <el-table-column prop="typeName"
          label="券类型">
        </el-table-column>
        <el-table-column prop="name"
          label="劵名称">
        </el-table-column>
        <el-table-column prop="faceValue"
          label="券说明">
        </el-table-column>
        <el-table-column prop="doorsillMoneyName"
          label="使用门槛">
        </el-table-column>
        <!-- <el-table-column prop="scopeName"
          label="适用范围">
        </el-table-column> -->
        <el-table-column label="有效期"
          width="250px">
          <template slot-scope="scope">
            <span v-if="scope.row.indate !== 1">
              {{(scope.row.indateStart).substring(0,10)}} 至 {{(scope.row.indateEnd).substring(0,10)}}
            </span>
            <span v-if="scope.row.indate == 1">
              {{scope.row.indateDay}}天
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="sellNum"
          label="已售数量">
        </el-table-column>
        <el-table-column prop="stateName"
          label="状态">
        </el-table-column>
        <el-table-column prop="person"
          label="创建人">
        </el-table-column>
        <el-table-column prop="createTime"
          label="创建时间"
          width="200px">
        </el-table-column>
        <el-table-column fixed="right"
          width="200px"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="See(scope.row)"
              type="text"
              size="small">查看详情</el-button>
            <el-button v-if="scope.row.state == 1"
              @click="disabled(scope.row)"
              type="text"
              size="small"
              v-has="'marketingcouponstate'">禁用</el-button>
            <el-button v-if="scope.row.state == 2 || scope.row.state == 4"
              @click="able(scope.row)"
              type="text"
              size="small"
              v-has="'marketingcouponstate'">启用</el-button>
            <el-button @click="deletes(scope.row)"
              type="text"
              size="small"
              v-has="'marketingcouponredact'"
              v-if="scope.row.state !== 1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item class="fr">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10,20,30,40]"
          :page-size="pageSize"
          layout="total, prev , pager , next, sizes"
          :total="total"
          style="margin-top:20px">
        </el-pagination>
      </el-form-item>
    </el-form>
    <!-- 新增弹出框 -->
    <el-dialog title="新增优惠券"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      class="dialog"
      @close="close('formData')">
      <el-form :model="form"
        label-width="100px"
        :rules="rules"
        ref="formData">
        <el-form-item label="券名称"
          prop="name">
          <el-input v-model="form.name"
            maxlength="12"></el-input>
        </el-form-item>
        <el-form-item label="券类型"
          prop="type">
          <el-select v-model="form.type"
            placeholder="请选择优惠券类型"
            class="el-form-item__content"
            @change="SelectChange">
            <el-option label="代金券"
              value="1"></el-option>
            <el-option label="折扣券"
              value="2"></el-option>
            <el-option label="礼品券"
              value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="券面值"
          prop="faceValue"
          v-if="SelectVal==1"
          class="quan_w">
          <el-input-number controls-position="right"
            :min="1"
            :max="10000"
            v-model="form.faceValue"
            :precision="0"
            size="small"></el-input-number>&nbsp;&nbsp;元
          <p style="color:#f56c6c;padding-bottom:10px">本券仅支持到店线下使用</p>
        </el-form-item>
        <el-form-item label="券折扣"
          prop="DiscountValue"
          v-if="SelectVal==2"
          class="quan_w">
          <el-input-number v-model="form.DiscountValue"
            controls-position="right"
            :min="1"
            :max="100"
            size="small"></el-input-number>&nbsp;&nbsp;%
        </el-form-item>
        <el-form-item label="礼品券"
          prop="GiftValue"
          v-if="SelectVal==3">
          <el-input v-model="form.GiftValue"
            maxlength="12"></el-input>
        </el-form-item>
        <el-form-item label="使用门槛">
          <template>
            <el-radio-group v-model="form.doorsill"
              @change="doorsill_change">
              <el-radio :label="1">无</el-radio>
              <el-radio :label="2">有</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="订单满"
          prop="doorsillMoney"
          v-if="doorsill_val"
          class="doorsillMoney">
          <el-input-number v-model="form.doorsillMoney"
            controls-position="right"
            :min="1"
            :max="10000"
            :precision="0"
            size="small"
            style="width:269px;margin-left:10px"></el-input-number>
        </el-form-item>

        <el-form-item label="券有效期"
          style="height:90px;">
          <template>
            <el-radio-group v-model="form.indate">
              <div style="height:34px;line-height:34px">
                <el-radio :label="1"
                  style="float:left;">
                  自领取之日起&nbsp;&nbsp;
                </el-radio>
                <el-form-item style="float:left;width:130px;"
                  label=""
                  prop="indateDay"
                  v-if="form.indate==1">
                  <el-input-number v-model="form.indateDay"
                    style="width:130px;"
                    controls-position="right"
                    :min="1"
                    :max="10000"
                    :precision="0"
                    size="small"></el-input-number>
                </el-form-item>
                <span v-if="isDisabled">天有效</span>
              </div>
              <div style="height:34px;line-height:34px"
                class="times">
                <el-radio :label="2">
                  时间周期&nbsp;&nbsp;
                </el-radio>
                <el-form-item prop="time"
                  v-if="form.indate==2">
                  <el-date-picker @change="timeChange"
                    v-model="form.time"
                    type="daterange"
                    size="small"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions0"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:285px;height:34px;">
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="使用说明">
          <el-input type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="form.explain"
            maxlength="100">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="Sure('formData')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看弹出框 -->
    <el-dialog title="查看优惠券"
      :visible.sync="dialogVisible2">
      <el-form :model="form"
        :label-width="formLabelWidth"
        class="see_coupon">
        <el-form-item label="券名称">
          <span>{{SeeData.name}}</span>
        </el-form-item>
        <el-form-item label="券类型">
          <span>{{ SeeData.typeName }}</span>
        </el-form-item>
        <el-form-item label="券面值">
          <span>{{ SeeData.faceValue }}</span>
        </el-form-item>
        <el-form-item label="使用门槛">
          <p v-if="SeeData.doorsill ==1">无</p>
          <p v-if="SeeData.doorsill ==2">
            <span>{{ SeeData.doorsillMoneyName }}</span>
          </p>
        </el-form-item>
        <el-form-item label="有效期">
          <p v-if="SeeData.indate ==2">
            {{(SeeData.indateStart).substring(0,10)}} 至 {{(SeeData.indateEnd).substring(0,10)}}
          </p>
          <p v-if="SeeData.indate ==1">
            {{SeeData.indateDay}}天
          </p>
        </el-form-item>
        <el-form-item label="使用说明">
          <span>{{ SeeData.explain }}</span>
        </el-form-item>
        <el-form-item label="已售数量">
          <span>{{ SeeData.sellNum }}</span>
        </el-form-item>

        <el-form-item label="状态">
          <span>{{ SeeData.stateName }}</span>
        </el-form-item>
        <el-form-item label="创建人">
          <span>{{ SeeData.person }}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ SeeData.createTime }}</span>
        </el-form-item>

      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary"
          @click="SeeSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetCoupon, RedactCoupon, StateCoupon } from "@/public/js/saleRoom";
import { create } from "domain";
export default {
  data() {
    return {
      pageSize: 10,
      pageNo: 1,
      pageNum: 1,
      total: 0,
      type: "",
      state: "",
      search: "",
      typeStr: "全部类型",
      typeStr_state: "全部状态",
      doorsill: "1",
      scope: "1",
      doorsillMoneyName: "",
      flg: false,
      SelectVal: 1,
      doorsill_val: false,
      tableData: [],
      SeeData: "",
      isDisabled: true,
      isDisabled2: false,
      dialogVisible: false,
      dialogVisible2: false,
      DiscountValue: "",
      form: {
        name: "",
        type: "",
        faceValue: "",
        DiscountValue: "",
        GiftValue: "",
        doorsill: 1,
        doorsillMoney: "",
        scope: 1,
        indate: 1,
        indateDay: "",
        time: [],
        explain: ""
      },
      formLabelWidth: "120px",
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        type: [
          { required: true, message: "请选择优惠券类型", trigger: "change" }
        ],
        faceValue: [
          { required: true, message: "请输入券面值", trigger: "blur" }
        ],
        DiscountValue: [
          { required: true, message: "请输入折扣比率", trigger: "blur" }
        ],
        GiftValue: [{ required: true, message: "请输入券", trigger: "blur" }],
        doorsillMoney: [
          { required: true, message: "请输入订单额", trigger: "blur" }
        ],
        indateDay: [{ required: true, message: "请输入日期", trigger: "blur" }],
        time: [
          {
            type: "array",
            required: true,
            message: "请选择周期",
            trigger: "change"
          }
        ]
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
        }
      }
    };
  },
  created() {
    this._GetCoupon();
  },
  mounted() {},
  methods: {
    //选中券类型
    SelectChange(val) {
      if (val == 1) {
        this.SelectVal = 1;
      }
      if (val == 2) {
        this.SelectVal = 2;
      }
      if (val == 3) {
        this.SelectVal = 3;
        this.form.faceValue = "";
      }
    },
    timeChange(time) {
      console.log(time);
    },
    //使用门槛
    doorsill_change(val) {
      if (val == 2) {
        this.doorsill_val = true;
      } else {
        this.doorsill_val = false;
      }
    },
    // 选中券有效期
    change(val) {
      if (val == 1) {
        this.isDisabled = true;
        this.isDisabled2 = false;
      } else {
        this.isDisabled = false;
        this.isDisabled2 = true;
      }
    },
    // 获取列表数据
    _GetCoupon() {
      var data = {
        bagId: "",
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: this.type,
        search: this.search,
        state: this.state,
        free: 2
      };
      GetCoupon(data).then(res => {
        this.tableData = res.data.discountCouponList;
        this.total = res.data.total;
        this.tableData.forEach(item => {
          if (item.type == 1) {
            item.faceValue = item.faceValue + "元";
          }
          if (item.type == 2) {
            item.faceValue = Math.round(item.faceValue * 10) / 100.0 + "折";
          }
        });
      });
    },
    // 全部类型下拉选择
    setType(e) {
      this.search = "";
      this.type = e.id;
      e.id == 1
        ? (this.typeStr = "代金券")
        : e.id == 2
          ? (this.typeStr = "折扣券")
          : e.id == 3 ? (this.typeStr = "礼品券") : (this.typeStr = "全部类型");
      this._reset();
    },
    // 全部状态下拉选择
    setType_state(e) {
      this.search = "";
      this.state = e.id;
      e.id == 1
        ? (this.typeStr_state = "启用")
        : e.id == 2
          ? (this.typeStr_state = "禁用")
          : (this.typeStr_state = "全部类型");
      this._reset();
    },
    //查询
    _reset() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._GetCoupon();
    },
    // 新增
    add() {
      // this.form = {},
      this.form.name = undefined;
      this.form.type = undefined;
      this.form.explain = undefined;
      this.form.faceValue = undefined;
      this.form.DiscountValue = undefined;
      this.form.GiftValue = undefined;
      this.form.doorsillMoney = undefined;
      this.form.indateDay = undefined;
      this.dialogVisible = true;
    },
    //保存
    Sure(formName) {
      var faceValue;
      if (this.form.type == 1) {
        faceValue = this.form.faceValue;
      }
      if (this.form.type == 2) {
        faceValue = this.form.DiscountValue;
      }
      if (this.form.type == 3) {
        faceValue = this.form.GiftValue;
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          var data = {
            id: "",
            name: this.form.name,
            type: this.form.type,
            faceValue: faceValue,
            doorsill: this.form.doorsill,
            scope: this.form.scope,
            indate: this.form.indate,
            explain: this.form.explain,
            free: 2
          };
          if (this.form.indate == 1) {
            data.indateDay = this.form.indateDay;
          }
          if (this.form.indate == 2) {
            var indateStart = this.form.time[0];
            var indateEnd = this.form.time[1];
            data.indateStart = indateStart;
            data.indateEnd = indateEnd;
          }
          if (this.form.doorsill == 2) {
            data.doorsillMoney = this.form.doorsillMoney;
          }
          RedactCoupon(data).then(res => {
            if (res.data.errCode == 0) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
            }
          });
          this.dialogVisible = false;
          this._GetCoupon();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    SeeSure() {
      this.dialogVisible2 = false;
    },
    See(row) {
      this.dialogVisible2 = true;
      this.SeeData = row;
      this.SeeData.indate = this.SeeData.indate.toString();
      if (this.SeeData.scopeName == "房费") {
        this.SeeData.scope = "1";
      }
      if (this.SeeData.scopeName == "餐饮") {
        this.SeeData.scope = "2";
      }
      if (this.SeeData.scopeName == "商城") {
        this.SeeData.scope = "3";
      }
      if (this.SeeData.scopeName == "其它") {
        this.SeeData.scope = "4";
      }
    },
    deletes(row) {
      this.$confirm("此操作将删除该优惠券, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var data = {
            id: row.id,
            state: 3,
            free: 2
          };
          StateCoupon(data).then(res => {
            if (res.data.errCode == 0) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              row.check = true;
              this._GetCoupon();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    handelerState(str, state, id) {
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var data = {
          id,
          state: state,
          free: 2
        };
        StateCoupon(data).then(res => {
          if (res.data.errCode == 0) {
            this.$message({
              type: "success",
              message: "操作成功"
            });

            this._GetCoupon();
          }
        });
      });
    },
    // 启用
    able(row) {
      let str = "此操作将启用该优惠券, 是否继续";
      this.handelerState(str, 1, row.id);
    },
    // 禁用
    disabled(row) {
      let str = "";
      if (!row.activitys) {
        str = `此操作将禁用该优惠券, 是否继续?`;
      } else {
        str = `该优惠券已被${
          row.activitys
        }正在使用，您是否继续禁用？禁用后，营销活动优惠券则不能被赠送；`;
      }
      this.handelerState(str, 2, row.id);
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this._GetCoupon();
    },
    // 第几页
    handleCurrentChange(value) {
      this.pageNum = value;
      this._GetCoupon();
    },
    // 关闭弹窗
    close(formName) {
      console.log(formName);
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss">
</style>
